<template>
  <div class="recomments-container">
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      ></van-field>
      <div class="public" @click="addRecomments">发布</div>
    </van-popup>
  </div>
</template>
<script>
import { addRecomments_api } from "@/api/user.js";
export default {
  props: ["artId", "show", "target", "total"],
  data() {
    return {
      message: "",
      recommentsUser: {},
    };
  },
  methods: {
    // 发布评论
    async addRecomments() {
      if (!this.message.trim()) {
        this.$toast("请输入评论内容");
        return;
      }
      const { data: res } = await addRecomments_api({
        target: this.target.toString(),
        content: this.message,
        art_id: this.artId,
      });
      console.log(res);
      this.recommentsUser = res.data.new_obj;
      this.message = "";
      this.$toast("发表评论成功");
      this.$emit("rec", this.recommentsUser);
      this.$emit("repl", this.recommentsUser);
    },
  },
};
</script>
<style lang='less' scoped>
.van-popup {
  display: flex;
  .van-field {
    flex: 1;
    height: 300px;
  }
  /deep/.van-field__word-limit {
    margin-top: 100px;
  }
  .public {
    width: 150px;
    height: 300px;
    font-size: 35px;
    color: #bfd7ee;
    text-align: center;
    line-height: 300px;
  }
}
.van-field {
  /deep/.van-field__value {
    background-color: #f5f7f9;
    padding: 20px;
  }
}
</style>